<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js">
		</script>



	</head>
	<body>
		<div id="app">
			<!-- 键盘只有一按下 就可以调用keyup -->
			<input type="text" v-model="firstname" />
			+
			<input type="text" v-model="lastname" />
			=
			<input type="text" v-model="fullname" />

		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					firstname: '',
					lastname: '',
				
				},
				methods: {

				},
				computed: {
					/* 1.在这里 v-model 中绑定的属性fullname
					   2.只有在return 中的this.firstname或者this.lastname 一改变 就重新调用这个匿名方法
					   3.这个fullname 的值会被缓存  只要firstname 或者lastname不改变 他就不会调用这个方法
					 
					 */
					fullname: function () {
						return this.firstname + this.lastname
					}
				}

			})
		</script>
	</body>
</html>
